<template>
  <main-layout>
    <div class="dashboard-container">
      <div class="stats-grid">
        <el-card class="stat-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card-title">区块链数量</span>
          </div>
          <div class="card-value">
            <span class="value-number">4</span>
          </div>
        </el-card>
        <el-card class="stat-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card-title">节点数量</span>
          </div>
          <div class="card-value">
            <span class="value-number">4</span>
          </div>
        </el-card>
        <el-card class="stat-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card-title">交易数量</span>
          </div>
          <div class="card-value">
            <span class="value-number">4</span>
          </div>
        </el-card>
        <el-card class="stat-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card-title">待交易数量</span>
          </div>
          <div class="card-value">
            <span class="value-number">4</span>
          </div>
        </el-card>
      </div>

      <div class="node-list-card">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card-title">节点ID列表</span>
            <el-button 
              type="text" 
              class="refresh-btn" 
              icon="el-icon-refresh" 
              @click="refreshNodeList"
            >
              刷新
            </el-button>
          </div>
          <el-scrollbar class="node-list-scrollbar">
            <div 
              v-for="(node, index) in nodeList" 
              :key="index" 
              class="node-item"
            >
              <el-tooltip 
                effect="dark" 
                :content="node" 
                placement="top-start"
              >
                <span class="node-id">{{ node }}</span>
              </el-tooltip>
              <el-button 
                type="text" 
                size="mini" 
                icon="el-icon-document-copy" 
                @click="copyNodeId(node)"
                class="copy-btn"
              >
                复制
              </el-button>
            </div>
          </el-scrollbar>
        </el-card>
      </div>
    </div>
  </main-layout>
</template>

<script>
import MainLayout from "@/components/Layout.vue";

export default {
  name: "DataHome",
  components: {
    MainLayout,
  },
  data() {
    return {
      nodeList: [
        "euwahi214235eruiouerhfoerhgiouergih656456rghsrugferogiher3676756ogue473riohgehwguh",
        "node-id-002-example-1234567890abcdef",
        "another-node-id-9876543210fedcba",
        "test-node-123-xyz",
        "production-node-456-abc"
      ]
    };
  },
  methods: {
    refreshNodeList() {
      // 这里可以添加刷新节点列表的逻辑
      this.$message.info('节点列表已刷新');
    },
    copyNodeId(nodeId) {
      navigator.clipboard.writeText(nodeId)
        .then(() => {
          this.$message.success('节点ID已复制到剪贴板');
        })
        .catch(err => {
          console.error('复制失败:', err);
          this.$message.error('复制失败');
        });
    }
  },
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #606266;
}

.card-value {
  font-size: 32px;
  font-weight: bold;
  margin-top: 10px;
}

.value-number {
  color: #409EFF;
}

.node-list-card {
  margin-top: 20px;
}

.node-list-scrollbar {
  max-height: 300px;
}

.node-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #EBEEF5;
  transition: background-color 0.3s;
}

.node-item:hover {
  background-color: #f5f7fa;
}

.node-id {
  font-family: monospace;
  word-break: break-all;
  flex: 1;
  color: #606266;
  cursor: pointer;
}

.copy-btn {
  margin-left: 16px;
  color: #909399;
}

.copy-btn:hover {
  color: #409EFF;
}

.refresh-btn {
  color: #909399;
}

.refresh-btn:hover {
  color: #409EFF;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>